<template>
  <div>
    <a-form :form="form">

      <div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
          <a-row :gutter="24">

          <a-col :span="6">
              <p align="center" style="font-weight: bold">参数名称</p>
          </a-col>

          <a-col :span="3">
            <p align="center" style="font-weight: bold">描述</p>
          </a-col>

          <a-col :span="3">
            <p align="center" style="font-weight: bold">标准值</p>
          </a-col>

          <a-col :span="3">
            <p align="center" style="font-weight: bold">上限值</p>
          </a-col>

          <a-col :span="3">
            <p align="center" style="font-weight: bold">下限值</p>
          </a-col>

          <a-col :span="3">
            <p align="center" style="font-weight: bold">备注</p>
          </a-col>

          <a-col :span="3" style="padding-left: 0px">
            <p  style="font-weight: bold">删除一行</p>
          </a-col>
          </a-row>

        <div v-for="(item,index) in keysList" :key="index">
          <a-row :gutter="24">
            <!--<span>{{item}}</span>-->
            <a-col :span="6">
                <a-input v-model="item[index+'paramName']"/>
            </a-col>

            <a-col :span="3">
                <a-input v-model="item[index+'description']"/>
            </a-col>

            <a-col :span="3">
                <a-input v-model="item[index+'standard']"/>
            </a-col>

            <a-col :span="3">
                <a-input v-model="item[index+'ceil']"/>
            </a-col>

            <a-col :span="3">
                <a-input v-model="item[index+'lower']"/>
            </a-col>

            <a-col :span="3">
                <a-input v-model="item[index+'remark']"/>
            </a-col>

            <a-col :span="3" style="padding-left: 0px">
                <template v-if="keysList.length >= 1">
                  <a-button type="dashed" icon="minus" @click="removeRow(item)"
                            class="minusRowBtn"></a-button>
                </template>
            </a-col>
          </a-row>
        </div>
        <a-button type="dashed" icon="plus" @click="addRow" class="addRowBtn">
          新增技术参数
        </a-button>
      </div>

    </a-form>
    <a-button style="margin-top: 25px;" type="primary" @click="handleSubmit">
      提交
    </a-button>

  </div>
</template>

<script>
  export default {
    name: "DynamicForm",
    props: {
      wrapHeight: { // 表单容器的高度
        type: Number,
        default: 800
      },
      arr: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    data() {
      return {
        technologyParamFormData:[],
        id: 0,
        keysList: [
          {
            "0paramName":'',
            "0description":'',
            "0standard":'',
            "0ceil":'',
            "0lower":'',
            "0remark":'',
          }
        ],
      }
    },
    created() {
      this.form = this.$form.createForm(this)
    },
    methods: {
      // 移除某行
      removeRow(k) {
        if (this.keysList.length === 1) { // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
          return
        }
        this.keysList = this.keysList.filter(item => item !== k)
      },
      // 新增一行
      addRow() {
        // this.id = this.id + 1;
        // this.keysList = this.keysList.concat(this.id);
        const prefix = this.keysList.length;
        this.keysList.push({
          [prefix+"paramName"]:'',
          [prefix+"description"]:'',
          [prefix+"standard"]:'',
          [prefix+"ceil"]:'',
          [prefix+"lower"]:'',
          [prefix+"remark"]:'',
        })
      },
      handleSubmit(){
        //console.log(this.keysList)
        this.keysList.forEach((obj,index)=>{
          let tempObj = {
            paramName:obj[index+'paramName'],
            description:obj[index+'description'],
            standard:obj[index+'standard'],
            ceil:obj[index+'ceil'],
            lower:obj[index+'lower'],
            remark:obj[index+'remark']
            //...
          }
          this.technologyParamFormData.push(tempObj)
        })
        console.log(JSON.stringify(this.technologyParamFormData));
      },
    }
  }
</script>

<style lang="less" scoped>
  .dynamic-wrap {
    padding-top: 10px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 7px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d8d8d8;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
  }

  .minusRowBtn {
    color: #f5222d;
    background: #fff1f0;
    border-color: #ffa39e;
    padding-right: 7px;
    padding-left: 7px;
    height: 29px;
    margin-left: 10px;
  }

  .addRowBtn {
    width: 100%;
    color: #1890ff;
    border-color: #91d5ff;
    margin: 0px 0px 0px 0px;
  }
</style>